import React, {useEffect, useRef} from 'react';
import Editor, {IAceEditorProps} from 'react-ace';
import 'ace-builds/src-noconflict/mode-sh';
import 'ace-builds/src-noconflict/mode-text';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/mode-space';
import 'ace-builds/src-noconflict/mode-python';
import 'ace-builds/src-noconflict/mode-javascript';
// 引入对应的主题
import 'ace-builds/src-noconflict/theme-tomorrow';
// 代码联想
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/webpack-resolver';

interface IProps extends IAceEditorProps {

}

export default function (props: IProps) {

  const editorInstance = useRef<any>() // 获取编辑器实例

  const style = {fontFamily: 'Source Code Pro, Courier New, Courier, Monaco, monospace, PingFang SC, Microsoft YaHei', ...props.style}

  const complete = (editor: any) => {

  }

  useEffect(() => {
    // !动态改变编辑器的代码提示，必须重新设置
    complete(editorInstance.current.editor)
  }, [props])

  return (
    <Editor
      ref={editorInstance}
      name="app_code_editor"
      theme="tomorrow"
      fontSize={13}
      tabSize={2}
      {...props}
      style={style}
    />
  )
}
